<template>
  <div class="top-query-box">
    <div class="btn-box">
      <van-button v-for="(item, index) in options" @click="toggleActive(item,index)"
        :color="btnVal == item ? 'var(--van-primary-color)' : '#B5B5B5'" style="box-shadow: 0px 6px 8px #919AA6"
        :key="index">{{item.label}}</van-button>
    </div>
    <div class="time-box">
      <span>{{ showText }}</span>
      <van-icon @click="show = !show" :class="['down-icon']" :style="{'transform': !show ? 'rotate(90deg)' : ''}"
        name="play" size="16" color="var(--van-primary-color)" />
    </div>

    <van-popup v-model:show="show" position="bottom" style="height:40%;width: 100vw;bottom: 0;" round
      :close-on-click-overlay="false" teleport="#app">
      <van-date-picker v-model="timeVal" @cancel="show = false" ref="datePicker" @confirm="confirm"
        :columns-type="columnsType" :filter="filter" />
    </van-popup>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import moment from "moment";

const props = defineProps({
  timeVal: String,
  startTime: String,
  endTime: String,
  type: {
    type: String,
    default: "month", // quarter month
  },
});
const datePicker = ref();
const timeVal = ref([]);

const options = ref([
  {
    label: "月度",
    value: ["year", "month"],
  },
  {
    label: "年累计",
    value: ["year"],
  },
]);
if (props.type == "quarter") {
  options.value.splice(1, 0, {
    label: "季度",
    value: ["year", "month"],
    type: "quarter",
  });
}
const columnsType = ref(["year", "month"]);
const show = ref(false);
const quarterMap = {
  "03": { value: "01", label: "一季度" },
  "06": { value: "04", label: "二季度" },
  "09": { value: "07", label: "三季度" },
  12: { value: "10", label: "四季度" },
};
const filter = (type, options) => {
  if (btnVal.value.type == "quarter" && type === "month") {
    return options.filter((option) => {
      let { value } = option;
      if (quarterMap[value]) {
        option.text = quarterMap[value].label;
        // option.value = quarterMap[value].value;
        return option;
      }
    });
  }
  return options;
};

const emit = defineEmits(["confirm", "update:startTime", "update:endTime"]);
const showText = ref("");
const btnVal = ref({});

const confirm = (val) => {
  let start = val.selectedValues,
    end = start.join("-");

  if (btnVal.value.type == "quarter") {
    showText.value = start[0] + quarterMap[start[1]].label;
    start[1] = quarterMap[start[1]].value + "";
  } else {
    showText.value = start.join("-");

    if (start.length == 1) {
      start = [start[0], "01"];
      end = start[0] + "-12";
    }
  }
  emit("update:startTime", start.join("-"));
  emit("update:endTime", end);
  emit("confirm", [start.join("-"), end], btnVal.value);
  show.value = false;
};

const quarterEndMonths = ["03", "06", "09", "12"];
const toggleActive = (item) => {
  if (btnVal.value == item) return;
  columnsType.value = item.value;
  btnVal.value = item;
  // let startTime = props.startTime || moment().format("YYYY-MM");
  let startTime = moment().format("YYYY-MM");

  let value = startTime.split("-"),
    month = moment(startTime).month();
  if (btnVal.value.type == "quarter") {
    value = [value[0], quarterEndMonths[Math.floor(month / 3)]];
  }
  if (item.value.length == 1) value = [value[0]];

  timeVal.value = value;
  let selectedValues = JSON.parse(JSON.stringify(value));
  confirm({ selectedValues });
};

toggleActive(options.value[0]);
defineExpose({
  filter,
  show,
});
</script>

<style lang="less" scoped>
.top-query-box {
  position: relative;
  width: 100%;
  padding: 20px 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  button {
    border-radius: 25px;
    padding: 5px 20px;
    font-size: 16px;
  }
  .time-box {
    margin-top: 15px;
    color: #6d7278;
    font-size: 14px;
    .down-icon {
      font-size: 14px;
      margin-left: 5px;
    }
  }
  button + button {
    margin-left: 30px;
  }
}
</style>